/**
 * Created by 小敏哥 on 2017/11/28.
 */
import React, {Component} from 'react';
import style from './index.scss'
import common from '../../../../../js/utils/common'
import {connect} from 'react-redux';
import {checkOrder, confirmStatus} from '../../actions/successAction';


class Success extends Component {
    constructor(props) {
        super(props);
        this.timeOut = false;
        this.leave=false;
        this.reloadCount = 0;//刷新次数
    }

    //清除缓存
    clearCache() {
        localStorage.clear();
        sessionStorage.clear();
    }

    componentDidMount() {
        this.changeStatusWithTimeOut();
        this.checkOrder();
    }

    renderButton() {
        switch (this.props.confirmStatus.acceptStatus) {
            case 3:
                return <button className={style.errorButton} onClick={() => {
                    history.back()
                }}>重新录入</button>;
            case -1:
            case -2:
                return <button className={style.errorButton} onClick={() => {
                    this.reCheck()
                }}>刷新</button>;
            default:
                return '';
        }
    }

    //清除缓存状态重新检查结果
    reCheck() {
        this.props.dispatch(confirmStatus({
            acceptStatus: 0,
            acceptRemark: '',
        }));
        this.timeOut = false;
        this.changeStatusWithTimeOut();
        this.checkOrder();
        this.reloadCount++;
    }

    //三分钟后超时
    changeStatusWithTimeOut() {
        setTimeout(() => {
            this.timeOut = true;
        }, 60000)
    }

    componentWillUnmount() {
        //离开页面时终止请求
        this.timeOut = true;
        this.leave=true;
        this.props.dispatch(confirmStatus({acceptStatus: 0, acceptRemark: ''}));
    }

    //持续检查订单状态
    checkOrder() {
        setTimeout(() => {
            //直接退出，避免离开后timeout触发，更改了状态
            if(this.leave){
                return;
            }
            this.props.dispatch(checkOrder({orderId: this.props.params.chargeOrderId}, (result) => {
                //是否已离开当前页面
                if(this.leave){
                    return;
                }
                //是否超时
                if (!this.timeOut) {
                    if (result.acceptStatus == 0) {
                        this.checkOrder();
                    }
                    else {
                        //成功时清空所有缓存
                        if (result.acceptStatus == 1) {
                            this.clearCache();
                        }
                        this.props.dispatch(confirmStatus({
                            acceptStatus: result.acceptStatus,
                            acceptRemark: result.acceptRemark,
                        }))
                    }
                }
                else {
                    if (this.reloadCount < 3) {
                        this.props.dispatch(confirmStatus({
                            acceptStatus: -1,
                            acceptRemark: '请刷新重试，请邮寄受理成功后再选号。',
                        }))
                    }
                    else {

                        this.props.dispatch(confirmStatus({
                            acceptStatus: -2,
                            acceptRemark: '请刷新重试，或咨询现场邮政速递工作人员。请邮寄受理成功后再选号。客服热线：020-11183',
                        }))
                    }
                }
            }))
        }, 10000)
    }

    //根据status获取状态标题
    getStatusText() {
        switch (this.props.confirmStatus.acceptStatus) {
            case 0:
                return '获取受理结果';
            case 1:
                return '邮寄受理成功';
            case -1:
            case -2:
                return '暂未获得受理结果';
            default:
                return '邮寄受理失败';
        }
    }


    render() {
        let title = this.getStatusText();
        common.setViewTitle(title);
        return this.props.confirmStatus.acceptStatus != 0 ? <div className={style.success}>
            <img
                src={this.props.confirmStatus.acceptStatus == 1 ? "./images/bigSuccess.png" : "./images/error_icon.png"}
                className={style.successImg}/>
            <div className={style.mainMessage}>{title}</div>
            <p className={style.tips}> {this.props.confirmStatus.acceptRemark}</p>

            {this.renderButton()}
            <div className={style.order}>
                <div className={style.content}>
                    <div>{`机动车牌邮寄服务`}</div>
                    <div>{`订单号${this.props.params.orderId}`}</div>
                </div>
                <div className={style.title} onClick={() => {
                    this.context.router.replace(`orderDetail/${this.props.params.orderId}/${this.props.params.chargeOrderId}`)
                }}>查看订单详情
                </div>
                <img src="./images/go.png"/>
            </div>

        </div> : <div className={style.maskTips}>
            <img src="./images/Loading.gif"/>
            <div className={style.title}>邮寄申请正在提交中，请稍候…</div>
            <div className={style.content}>请邮寄受理成功后再选号。</div>
        </div>
    }
}

//使用context
Success.contextTypes = {
    router: React.PropTypes.object.isRequired
};

function mapStateToProps(state) {
    return Object.assign({}, state.successInfo,);
}

export default connect(mapStateToProps)(Success);